<template>
	<view class="logon">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<h4>用户注册</h4>
		<view class="box">
			<!-- <image src="../../bc/me.png" mode=""></image>	<input type="text" v-model="nick" placeholder="请输入昵称"> -->
			<image src="../../bc/phone.png" mode=""><input type="text" v-model="id" placeholder="请输入手机号">
				<!-- 验证码 -->
				<view class="box2">
					<input type="text" v-model="yz" placeholder="请输入验证码">
					<button type="default" :class="disabled ? 'huoquzhong' : 'huoqu'" @click="getyz">{{ time }}{{ text }}</button>
				</view>
				<image src="../../bc/pass.png" mode="" class="world"><input type="password" v-model="pass" placeholder="请输入6-18数字与字母组合的密码">
					<image src="../../bc/pass.png" mode=""><input type="password" v-model="pass2" placeholder="再次确认密码">
						<!-- <image src="../../bc/please.png" mode=""><input type="text" v-model="please" placeholder="请输入邀请码"> -->
					
							<button @click="go" class="registry">注册</button>
							<view class="goLogin" @click="goLogin">已有账号,去登录--></view>
							<view class="goIndex" v-if="index" @click="goIndex"><--去首页</view>
		<view class="registrys">
		<!-- 用户注册协议 -->
		<label @click="xy(checks=!checks)">
			<checkbox :checked="checks"  /><text class="tongy">我已阅读同意 <text class="xy" @click="agreement">《众赢用户注册协议》</text></text>
		</label>
		</view>
		</view>
	</view>
</template>


<script>
	import api from '../../common/api.js'
	export default {
		name: 'logon',
		props: {
			index: {
				type: Boolean,
				defaut: false
			}
		},
		data() {
			return {
				id: '', // 用户手机号
				yz: '', // 验证码
				pass: '', // 密码
				pass2: '', // 确认密码
				please: '', // 邀请码,
				pid:'',
				shumatext: false,
				yanzhengnum: '',
				text: '获取验证码',
				time: '',
				disabled: false,
				checks:true,
			}
		},
		methods: {
			
			// 注册
			go() {
				if(!this.checks){
					uni.showToast({
						title:'请同意注册协议',
						icon:'none'
					})
					return
				}
				let {
					id,
					yz,
					pass,
					pass2,
					please
				} = this;
				var reg = /^1[3-9]\d{9}$/;
				var regs = /^[a-zA-Z0-9]{6,18}$/;
				// 输入框不为空
				if (id && yz && pass && pass2) {
					// 账号格式不对
					if (!reg.test(id)) {
						uni.showToast({
							title: '手机号格式不正确',
							icon: 'none'
						})
						return;
						
					} else {
						// ajax 请求数据  比对验证码

						//  验证密码格式
						if (!regs.test(pass)) {
							uni.showToast({
								title: '密码格式不正确',
								icon: 'none'
							})
							return;
						} else {
							//  判断两次密码一样不
							if (pass == pass2) {
								//  邀请码存在
								if(this.please){
									
								this.$api.sendRequest({
									data: {
										mobile: id,
										password: pass,
										pid: uni.getStorageSync('InvitationCode') ? uni.getStorageSync('InvitationCode') : 1,
										code: this.yz
									},
									url: api.LOGON_user,
									success(res) {
										console.log(res.code);
										// 登录成功 跳转
										if (res.code == 0) {
											uni.showToast({
											    title: res.msg,
												icon:'none',
											    duration: 1000
											});
										}
										// 注册成功 跳转
										if (res.code == 1) {
											uni.showModal({	
												title: res.msg,
												content: '是否去登录',
												success: function(res) {
													if (res.confirm) {
														uni.navigateTo({
															url: '../../pages/login/login'
														})
													} else if (res.cancel) {
														console.log('用户点击取消');
													}
												}
											});
										}
									}
								})
								}else{
								//邀请码不存在
									this.$api.sendRequest({
										data: {
											mobile: id,
											password: pass,
										pid: uni.getStorageSync('InvitationCode') ? uni.getStorageSync('InvitationCode') : 1,
											code: this.yz
										},
										url: api.LOGON_user,
										success(res) {
											console.log(res.code);
											// 登录成功 跳转
											if (res.code == 0) {
												uni.showToast({
												    title: res.msg,
													icon:'none',
												    duration: 1000
												});
											}
											// 注册成功 跳转
											if (res.code == 1) {
												uni.showModal({
													title: res.msg,
													content: '是否去登录',
													success: function(res) {
														if (res.confirm) {
															uni.navigateTo({
																url: '../../pages/login/login'
															})
														} else if (res.cancel) {
															console.log('用户点击取消');
														}
													}
												});
											}
										}
									})
								}
								
							} else {
								uni.showToast({
									title: '两次密码不一样',
									icon: 'none'
								})
								return;
							}
						}
					}

				} else {
					uni.showToast({
						title: '请补充完整信息',
						icon: 'none'
					})
				}

			},
			// 获取验证码
			getyz() {
				
				if(this.id==''){
				uni.showToast({
					title:'请输入手机号',
					icon:'none'
				})
				return
				}
				if (this.disabled) {
					return;
				}	
				console.log(this.id);
				this.$api.sendRequest({
					url: api.VER_Code,
					data:{
						mobile:this.id,
						event:'register',
					},
					success:res=>{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})			 
							if(res.code) {
								this.disabled = true;
								this.setInterValFunc();
							} else {
								
							}
					}
				})
				
				
			},
			goLogin(){
				//去登录
				uni.navigateTo({
					url: '../../pages/login/login'
				})
			},
			goIndex () {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			setInterValFunc() {
				//倒计时
			    this.time = 60;
			    this.text = '秒后重新发送';
			    this.setTime = setInterval(() => {
			        if (this.time - 1 == 0) {
			            this.time = '';
			            this.text = '重新获取';
			            this.code = '';
			            this.disabled = false;
			            clearInterval(this.setTime);
			        } else {
			            this.time--;
			        }
			    }, 1000);
			},
			agreement(){
				uni.showModal({
					title:'众赢用户协议',
					content:`本人自愿注册`,
					success:res=> {
						this.checks=res.confirm
					},
					fail:res=>{
						this.checks=res.cancel
					}
				})
			},
			xy(){
				console.log(this.checks);
			},
		},
		created() {
			
		}
	}
</script>

<style scoped>
	
	label{
		margin-left: 30rpx;
	}
	/* 同意 */
	.tongy{
		color: #C4C4C4;
	}
	/* 协议 */
	.xy{
		color: #556EFF;
		margin-left: 20rpx;
	}
	.status_bar {
	       height: var(--status-bar-height);
	       width: 100%;
	   }
	.logon {
		position: relative;
	}

	h4 {
		text-align: center;
		position: relative;
		top: 28rpx;
	}

	input {
		width: 80%;
		height: 100rpx;
		opacity: .6;
		padding-left: 80rpx;
		font-size: 1em;
		margin: 40rpx auto;
		border-bottom: solid 2rpx #F6F6F6;
	}

	image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 50rpx;
		margin-top: 30rpx;
	}

	.world {
		margin-top: 70rpx;
	}

	.box2 {
		display: flex;

	}

	.box2>input {
		width: 45%;
		margin-left: 60rpx;
		border-bottom: solid 2rpx #F6F6F6;
	}

	.box2>button {
		width: 32%;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 40rpx;
		font-size: .8em;
		/* 	background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
			    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
			    background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); */
		/* background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
			    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); */
		background: linear-gradient(to right, #3D54EA 50%, #7593FF 100%);
	}

	.registry {
		width: 90%;
		background-color: #207DFE;
		border-radius: 50rpx;
		margin: 80rpx auto;
		color: #FFFFFF;
	}
	.goLogin{
		float: right;
		font-size: .8em;
		color: #006DF3;
		padding-right: 20rpx;
		}
		.goIndex {
			float: left;
			font-size: .8em;
			color: #006DF3;
			padding-left: 20rpx;
		}
		.registrys{
			padding: 40rpx 20rpx 0;
			width: 100%;
			height: 30px;
		}
</style>
